<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/*伪类选择器  语法：任意选择器：hover【悬停】   每个伪类选择器，具备特点
			              所有元素具备：hover   【常见伪类选择器】
			*/
		   h1:hover{
			   background: #ffff7f;
			   color: #d2dbff;
		   }
		   /*伪类选择器：      link      链接未点击时
		    *                 active    链接被点击时
			*			      visited   链接点击后的状态
			*				  hover     悬停链接时的状态
			*主要结合在一起，针对a元素效果
			*/
		   a:link{ /*未访问状态*/
		        color: #d2dbff;
				/* 去掉超链接下划线 */
				text-decoration:none;
				}
			a:active{  /*被点击时状态*/
			    color: #ffff7f;
				background: #aaffff;
				}
			a:visited{ /*点击后状态*/
				color: #ffff7f;
				background: #aaffff;
				}
			a:hover{
				font-size: 36px;
			}
			/**
			 * 伪装选择器 input focus 获取焦点 鼠标点击输入框的效果
			 * 
			 针对 输入框 input元素
			 */
			input:focus{
				background: #d2dbff;
			}
			/**
			 * 伪类选择器    ：first-child 第一个儿子元素
			 *              ：last-child  最后一个儿子元素
			 *              ：nth-child(n) 匹配n个儿子元素
			 * 针对：父子级：默认父子级 table、列表..
			 */
			li:first-child{
				background: #aaffff;
				color: #d2dbff;
			}
			li:last-child{
				font-size: 15pt;
			}
			li:nth-child(2){
				background: #ffff7f;
				font-size: 15px;
			}
			li:nth-child(3){
				background: #ffff7f;
				font-size: 15px;
			}
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		<a href="#">超链接</a>
		<input type="text" >
		<!-- 元素之间存在父子集关系，默认存在父子关系 -->
		<ol>
			<li>唐山</li>
			<li>邢台</li>
			<li>承德</li>
			<li>保定</li>
		</ol>
	</body>
</html>